<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
		#p1{
			
			overflow: hidden;
			cursor: pointer;
		}
		#p1 img{
			height: 100px;
			width: 140px; 
			animation: fangda 5s linear 0s infinite;
		}
		 
			@keyframes fangda{
				from{width: 140px;height: 100px;}
				1%{width:149px;heigth:107px;}
				2%{width:158px;heigth:114px;}
				3%{width:167px;heigth:121px;}
				4%{width:176px;heigth:128px;}
				5%{width:185px;heigth:135px;}
				6%{width:194px;heigth:142px;}
				7%{width:203px;heigth:149px;}
				8%{width:212px;heigth:156px;}
				9%{width:221px;heigth:163px;}
				10%{width:230px;heigth:170px;}
				11%{width:239px;heigth:177px;}
				12%{width:248px;heigth:184px;}
				13%{width:257px;heigth:191px;}
				14%{width:266px;heigth:198px;}
				15%{width:275px;heigth:205px;}
				16%{width:284px;heigth:212px;}
				17%{width:293px;heigth:219px;}
				18%{width:302px;heigth:226px;}
				19%{width:311px;heigth:233px;}
				20%{width:320px;heigth:240px;}
				21%{width:329px;heigth:247px;}
				22%{width:338px;heigth:254px;}
				23%{width:347px;heigth:261px;}
				24%{width:356px;heigth:268px;}
				25%{width:365px;heigth:275px;}
				26%{width:374px;heigth:282px;}
				27%{width:383px;heigth:289px;}
				28%{width:392px;heigth:296px;}
				29%{width:401px;heigth:303px;}
				30%{width:410px;heigth:310px;}
				31%{width:419px;heigth:317px;}
				32%{width:428px;heigth:324px;}
				33%{width:437px;heigth:331px;}
				34%{width:446px;heigth:338px;}
				35%{width:455px;heigth:345px;}
				36%{width:464px;heigth:352px;}
				37%{width:473px;heigth:359px;}
				38%{width:482px;heigth:366px;}
				39%{width:491px;heigth:373px;}
				40%{width:500px;heigth:380px;}
				41%{width:509px;heigth:387px;}
				42%{width:518px;heigth:394px;}
				43%{width:527px;heigth:401px;}
				44%{width:536px;heigth:408px;}
				45%{width:545px;heigth:415px;}
				46%{width:554px;heigth:422px;}
				47%{width:563px;heigth:429px;}
				48%{width:572px;heigth:436px;}
				49%{width:581px;heigth:443px;}
				50%{width:590px;heigth:450px;}
				51%{width:599px;heigth:457px;}
				52%{width:608px;heigth:464px;}
				53%{width:617px;heigth:471px;}
				54%{width:626px;heigth:478px;}
				55%{width:635px;heigth:485px;}
				56%{width:644px;heigth:492px;}
				57%{width:653px;heigth:499px;}
				58%{width:662px;heigth:506px;}
				59%{width:671px;heigth:513px;}
				60%{width:680px;heigth:520px;}
				61%{width:689px;heigth:527px;}
				62%{width:698px;heigth:534px;}
				63%{width:707px;heigth:541px;}
				64%{width:716px;heigth:548px;}
				65%{width:725px;heigth:555px;}
				66%{width:734px;heigth:562px;}
				67%{width:743px;heigth:569px;}
				68%{width:752px;heigth:576px;}
				69%{width:761px;heigth:583px;}
				70%{width:770px;heigth:590px;}
				71%{width:779px;heigth:597px;}
				72%{width:788px;heigth:604px;}
				73%{width:797px;heigth:611px;}
				74%{width:806px;heigth:618px;}
				75%{width:815px;heigth:625px;}
				76%{width:824px;heigth:632px;}
				77%{width:833px;heigth:639px;}
				78%{width:842px;heigth:646px;}
				79%{width:851px;heigth:653px;}
				80%{width:860px;heigth:660px;}
				81%{width:869px;heigth:667px;}
				82%{width:878px;heigth:674px;}
				83%{width:887px;heigth:681px;}
				84%{width:896px;heigth:688px;}
				85%{width:905px;heigth:695px;}
				86%{width:914px;heigth:702px;}
				87%{width:923px;heigth:709px;}
				88%{width:932px;heigth:716px;}
				89%{width:941px;heigth:723px;}
				90%{width:950px;heigth:730px;}
				91%{width:959px;heigth:737px;}
				92%{width:968px;heigth:744px;}
				93%{width:977px;heigth:751px;}
				94%{width:986px;heigth:758px;}
				95%{width:995px;heigth:765px;}
				96%{width:1004px;heigth:772px;}
				97%{width:1013px;heigth:779px;}
				98%{width:1022px;heigth:786px;}
				99%{width:1031px;heigth:793px;}
				to{width: 1000px;height: 800px;}
			}
			
			#p1 img:hover{
				/* animation: fangda 5s linear 0s 6 running; */
				animation-play-state: paused;
			}
		 
		</style>
		<!-- <script>
		 var w=140;
		 var h=100;
		 for(var i=1;i<=99;i++){
			 document.write(i+"%{width:"+(w+i*9)+"px;heigth:"+(h+i*7)+"px;}<br/>");
		 }
		</script> -->
	</head>
	<body>
		<hgroup></hgroup>
		<div id="p1">
			<img src="6.jpg"/>
		</div>
	</body>
</html>
